/* ==========================================================================
   tisangelbruh.neocities.org
   one stylesheet for every page. edit here, it changes everywhere.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* neutrals — grey with a faint violet bias so it isn't flat computer-grey */
  --void:      #101014;
  --panel:     #191920;
  --panel-2:   #20202a;
  --line:      #2f2f3b;
  --line-2:    #3e3e4c;
  --text:      #c6c6d0;
  --text-dim:  #8a8a99;
  --text-faint:#5d5d6c;

  /* the one accent. use it sparingly or it stops meaning anything. */
  --accent:     #9ea4de;
  --accent-dim: #5c6096;
  --accent-bg:  rgba(158,164,222,.09);

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Cinzel", Georgia, "Times New Roman", serif;

  --col: 900px;
  --gap: 12px;
}

*,*::before,*::after{ box-sizing: border-box; }

html,body{ margin:0; padding:0; }

body{
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--accent-dim); color: #fff; }

a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
a:hover{ color: #fff; border-bottom-color: var(--accent); }

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar{ width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb{ background: var(--line-2); }
*::-webkit-scrollbar-track{ background: transparent; }

/* ==========================================================================
   shell
   ========================================================================== */
.shell{
  max-width: var(--col);
  margin: 0 auto;
  padding-block: 26px 44px;
  padding-inline: 16px;
}

/* ==========================================================================
   banner
   ========================================================================== */
.banner{
  position: relative;
  border: 1px solid var(--line);
  background: #0b0b0e;
  overflow: hidden;
}
.banner img{
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  opacity: .78;
}
.banner::after{          /* settle the image so the title reads cleanly */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,16,20,.15), rgba(16,16,20,.62));
  pointer-events: none;
}
.banner__plate{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.4vw, 10px);
  padding-inline: 16px;
}
.banner__title{
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 6.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: #f2f2f6;
  text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.9);
  text-wrap: balance;
}
.banner__sub{
  margin: 0;
  max-width: none;
  text-align: center;
  font-family: var(--mono);
  font-size: clamp(8.5px, 1.5vw, 10px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(226,226,236,.66);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

/* ==========================================================================
   layout
   ========================================================================== */
.layout{
  display: grid;
  grid-template-columns: 172px minmax(0,1fr);
  gap: var(--gap);
  margin-top: var(--gap);
  align-items: start;
}
.rail,
.main{ display: grid; gap: var(--gap); min-width: 0; }

@media (max-width: 720px){
  .layout{ grid-template-columns: minmax(0,1fr); }
}

/* ==========================================================================
   block — a panel with a little tab sitting on its shoulder
   ========================================================================== */
.block{ min-width: 0; }

.block__tab{
  display: inline-block;
  position: relative;
  top: 1px;
  margin: 0;
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom: none;
}
.block__tab .mark{ color: var(--accent-dim); }

.block__body{
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.block__body > :first-child{ margin-top: 0; }
.block__body > :last-child{ margin-bottom: 0; }

.block--flush .block__body{ padding: 0; }

/* ==========================================================================
   typography inside panels
   ========================================================================== */
h1,h2,h3{
  font-family: var(--mono);
  font-weight: 500;
  color: #dcdce6;
  letter-spacing: .01em;
  text-wrap: balance;
}
.page-title{ margin: 0 0 12px; font-size: 19px; }
h3{ margin: 20px 0 7px; font-size: 14px; color: var(--accent); }

p{ margin: 0 0 11px; max-width: 68ch; }
small{ font-size: 12px; color: var(--text-dim); }

hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.prose ul{ margin: 0 0 11px; padding-left: 18px; }
.prose li{ margin-bottom: 4px; }
.prose li::marker{ color: var(--accent-dim); }

.dim{ color: var(--text-dim); }
.mono{ font-family: var(--mono); }

/* ==========================================================================
   navigation
   ========================================================================== */
.nav{ list-style: none; margin: 0; padding: 0; }
.nav li + li{ border-top: 1px solid var(--line); }
.nav a{
  display: block;
  padding: 7px 12px;
  color: var(--text);
  border-bottom: none;
  box-shadow: inset 2px 0 0 transparent;
  transition: background .12s linear, color .12s linear;
}
.nav a:hover{
  background: var(--panel-2);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--accent-dim);
}
.nav a[aria-current="page"]{
  color: var(--accent);
  background: var(--accent-bg);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav a .idx{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-right: 7px;
}

/* ==========================================================================
   notes / callouts
   ========================================================================== */
.note{
  position: relative;
  padding: 9px 11px 9px 27px;
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  background: var(--accent-bg);
  border: 1px solid var(--line);
}
.note:last-child{ margin-bottom: 0; }
.note::before{
  content: "◆";
  position: absolute;   /* not a flex item — inline text must stay inline */
  left: 11px;
  top: 9px;
  color: var(--accent-dim);
  font-size: 10px;
  line-height: 1.7;
}

/* ==========================================================================
   status box
   ========================================================================== */
.status__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 5px;
}
.status__head time{ color: var(--text-faint); }
.status p{ margin: 0; font-size: 13px; }

/* ==========================================================================
   site log
   ========================================================================== */
.log{ margin: 0; }
.log dt{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  margin-top: 11px;
}
.log dt:first-child{ margin-top: 0; }
.log dd{
  margin: 3px 0 0;
  padding-left: 13px;
  position: relative;
  font-size: 12.5px;
  color: var(--text-dim);
}
.log dd::before{
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

/* ==========================================================================
   music player
   ========================================================================== */
.player{ display: grid; gap: 9px; }

.player__viz{
  display: block;
  width: 100%;
  height: 34px;
  background: #0d0d11;
  border: 1px solid var(--line);
}

.player__now{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
}
.player__track{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.player__time{
  flex: none;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.player__row{ display: flex; align-items: center; gap: 7px; }

.pbtn{
  flex: none;
  width: 26px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color .12s linear, border-color .12s linear;
}
.pbtn:hover{ color: var(--accent); border-color: var(--accent-dim); }
.pbtn[disabled]{ opacity: .4; cursor: default; }
.pbtn:hover[disabled]{ color: var(--text-dim); border-color: var(--line); }

input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 60px;
  min-width: 50px;
  height: 14px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 2px;
  background: var(--line-2);
}
input[type="range"]::-moz-range-track{
  height: 2px;
  background: var(--line-2);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 11px;
  margin-top: -4.5px;
  background: var(--accent);
  border: 0;
  border-radius: 0;
}
input[type="range"]::-moz-range-thumb{
  width: 3px;
  height: 11px;
  background: var(--accent);
  border: 0;
  border-radius: 0;
}
input[type="range"]:disabled::-webkit-slider-thumb{ background: var(--text-faint); }
input[type="range"]:disabled::-moz-range-thumb{ background: var(--text-faint); }

.player__vol{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 70px;
  min-width: 64px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.player__list{
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 124px;
  overflow-y: auto;
  border: 1px solid var(--line);
}
.player__list:empty{ display: none; }
.player__list li{
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.player__list li + li{ border-top: 1px solid var(--line); }
.player__list li:hover{ background: var(--panel-2); color: var(--text); }
.player__list li[aria-current="true"]{ color: var(--accent); background: var(--accent-bg); }

.player__drop{
  padding: 9px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-faint);
  border: 1px dashed var(--line-2);
}
.player__drop.is-over{ border-color: var(--accent); color: var(--accent); }
.player__drop input[type="file"]{
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}
.player__drop input[type="file"]::file-selector-button{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 3px 8px;
  margin-right: 8px;
  cursor: pointer;
}

/* ==========================================================================
   gallery grid
   ========================================================================== */
.grid-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 9px;
}
.slot{
  aspect-ratio: 1;
  max-width: 100%;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-faint);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 5px, rgba(158,164,222,.045) 5px 10px);
  border: 1px dashed var(--line-2);
}

/* ==========================================================================
   blog entries
   ========================================================================== */
.entry + .entry{ margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.entry__meta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.entry__meta .tag{ color: var(--accent-dim); }
.entry h2{ margin: 0 0 8px; font-size: 16px; }

/* ==========================================================================
   shrine cards
   ========================================================================== */
.shrines{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--gap);
}
.shrine{
  padding: 12px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.shrine h2{ margin: 0 0 5px; font-size: 13px; color: var(--accent); }
.shrine p{ margin: 0; font-size: 12.5px; color: var(--text-dim); }

/* ==========================================================================
   the moth
   ========================================================================== */
.moth{
  display: block;
  width: 90px;          /* 1:1 with the source, so the pixels stay square */
  height: auto;
  margin: 4px -16px 0 auto;
  opacity: .62;
  image-rendering: pixelated;
  transform: rotate(9deg);
  pointer-events: none;
  animation: moth-drift 9s ease-in-out infinite;
}
@keyframes moth-drift{
  0%,100%{ transform: rotate(9deg) translate(0,0); }
  50%    { transform: rotate(6deg) translate(-3px,-5px); }
}
@media (max-width: 720px){ .moth{ display: none; } }

/* ==========================================================================
   footer
   ========================================================================== */
.foot{
  margin-top: 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--text-faint);
}
.foot a{ color: var(--text-dim); border-bottom-color: var(--line-2); }
.foot a:hover{ color: var(--accent); }

/* ==========================================================================
   reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   split — two widgets side by side, stacking when there's no room
   ========================================================================== */
.split{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: var(--gap);
  align-items: start;
}
.split > *{ min-width: 0; }

/* The banner is 880px wide. Rendering it pixel-crisp keeps the dither sharp,
   but only when it isn't being scaled down — below that, let the browser
   smooth it instead of aliasing the dots into noise. */
@media (min-width: 912px){
  .banner img{ image-rendering: pixelated; }
}

/* A 1-bit dither falls apart when it's scaled down — at phone width the banner
   would be squashed to 39% and the dots turn to speckle. So below its native
   880px, crop the artwork to real pixels instead of resizing it. */
@media (max-width: 911px){
  .banner{ height: 150px; }
  .banner img{
    height: 100%;
    object-fit: cover;
    object-position: 38% center;   /* keeps the arch in frame */
    image-rendering: pixelated;
  }
}

/* ==========================================================================
   beepbox tunes
   ========================================================================== */
.tune + .tune{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tune__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  margin-bottom: 6px;
}
.tune__title{ color: var(--accent); }
.tune__tag{
  color: var(--text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.tune__head time{ color: var(--text-faint); font-size: 11px; }
.tune__player{
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100px;
  border: 1px solid var(--line);
  background: #000;
}
.tune__note{ margin: 7px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* placeholder shown where an embed will go */
.tune__slot{
  height: 100px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-faint);
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(45deg,
    transparent 0 5px, rgba(158,164,222,.045) 5px 10px);
}

/* the player only appears once there are songs listed in music.js */
.player[hidden]{ display: none; }
.player__empty{
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}