/* ---------- TV listings magazine ---------- */
#guideBtn {
  font-family: 'VT323', monospace;
  font-size: 15px;
  letter-spacing: 1px;
  background: none;
  border: 0;
  color: #ffd27a;
  cursor: pointer;
  float: right;
}

#mag {
  position: absolute;
  left: 4px;
  bottom: 24px;
  width: 92px;
  height: 124px;
  padding: 6px;
  z-index: 2;
  cursor: pointer;
  background: linear-gradient(160deg, #f6efdc, #ddd2b6);
  box-shadow: 2px 6px 10px rgba(0, 0, 0, .55);
  transform: rotate(-8deg);
  transition: transform .15s;
}
#mag:hover { transform: rotate(-4deg) translateY(-4px); }
#mag .mag-mast,
.g-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #d4202a;
  color: #fff;
  font-family: 'DM Serif Display', serif;
  border-radius: 6px;
  line-height: .85;
}
#mag .mag-mast { font-size: 26px; padding: 3px 6px 4px; }
#mag .mag-mast span,
.g-logo span { font-family: 'Archivo Narrow', sans-serif; font-weight: 700; letter-spacing: 1px; }
#mag .mag-mast span { font-size: 9px; }
#mag .mag-cover { margin-top: 8px; font: 700 11px/1.05 'Archivo Narrow', sans-serif; color: #1f3d8a; }
#mag .mag-price { position: absolute; right: 6px; bottom: 5px; font: 700 10px 'Archivo Narrow', sans-serif; color: #444; }

#guide {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 4, 0);
  transition: background .25s;
}
#guide[hidden] { display: none; }
#guide.shown { background: rgba(20, 10, 4, .55); }

#guide-page {
  position: relative;
  width: 720px;
  height: 840px;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 14px;
  color: #1b1b1b;
  font-family: 'Archivo Narrow', sans-serif;
  user-select: text;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .35), transparent 40%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .018) 0 1px, transparent 1px 3px),
    #efe6cf;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6), inset 0 0 60px rgba(120, 90, 40, .25);
  transform: rotate(-1.2deg) translateY(40px) scale(.96);
  opacity: 0;
  transition: transform .25s, opacity .25s;
}
#guide.shown #guide-page { transform: rotate(-1.2deg); opacity: 1; }
#guide-page::after {
  /* the staple */
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 26px;
  height: 3px;
  margin-left: -13px;
  background: linear-gradient(#ccc, #777);
  border-radius: 2px;
}
#guide-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font: 700 20px 'Archivo Narrow', sans-serif;
  cursor: pointer;
  color: #555;
}

.g-mast { display: flex; align-items: center; gap: 16px; border-bottom: 3px double #1b1b1b; padding-bottom: 10px; }
.g-logo { font-size: 54px; padding: 6px 12px 8px; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #d4202a; }
.g-logo span { font-size: 15px; letter-spacing: 3px; margin-top: 2px; }
.g-issue { flex: 1; font-weight: 700; letter-spacing: .5px; }
.g-edition { font-family: 'DM Serif Display', serif; font-size: 26px; color: #1f3d8a; font-weight: normal; }
#g-week { font-size: 15px; }
.g-price { font-size: 12px; color: #555; }

.g-tabs { display: flex; gap: 6px; margin: 10px 0 8px; }
.g-tabs button {
  font: 700 14px 'Archivo Narrow', sans-serif;
  letter-spacing: 1px;
  padding: 4px 12px;
  border: 2px solid #1b1b1b;
  background: transparent;
  cursor: pointer;
}
.g-tabs button.on { background: #1b1b1b; color: #efe6cf; }

.g-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.g-section[hidden] { display: none; }

#g-form { display: flex; align-items: center; gap: 8px; }
#g-form label { font-weight: 700; font-size: 14px; letter-spacing: .5px; }
#g-q {
  flex: 1;
  font: 18px 'Archivo Narrow', sans-serif;
  padding: 5px 8px;
  border: 0;
  border-bottom: 2px solid #1b1b1b;
  background: rgba(255, 255, 255, .45);
  outline: none;
}
#g-form button {
  font: 700 15px 'Archivo Narrow', sans-serif;
  letter-spacing: 1px;
  padding: 5px 16px;
  border: 0;
  background: #d4202a;
  color: #fff;
  cursor: pointer;
}
.g-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.g-chip {
  font: 12px 'Archivo Narrow', sans-serif;
  padding: 2px 8px;
  border: 1px solid #8a7a58;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: #3a3226;
}
.g-chip:hover { background: #1b1b1b; color: #efe6cf; }

#g-results,
#g-lineup { flex: 1; overflow-y: auto; padding-right: 6px; }
#g-results::-webkit-scrollbar,
#g-lineup::-webkit-scrollbar { width: 6px; }
#g-results::-webkit-scrollbar-thumb,
#g-lineup::-webkit-scrollbar-thumb { background: #8a7a58; }

.g-when {
  font: 700 13px 'Archivo Narrow', sans-serif;
  letter-spacing: 2px;
  margin: 6px 0 2px;
  color: #d4202a;
  border-bottom: 1px solid #1b1b1b;
  padding-bottom: 3px;
}
.g-hour { font: 22px 'DM Serif Display', serif; margin: 10px 0 2px; border-bottom: 2px solid #1b1b1b; }
.g-loading,
.g-empty { font-style: italic; color: #5b5040; }
.g-loading { animation: blink 1s steps(2) infinite; }

.g-item.g-gone { opacity: .45; text-decoration: line-through; }
.g-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dotted #8a7a58; }
.g-time { width: 46px; flex: none; font-weight: 700; font-size: 17px; }
.g-live {
  display: block;
  margin-top: 3px;
  width: max-content;
  padding: 0 4px;
  background: #d4202a;
  color: #fff;
  font-size: 11px;
  letter-spacing: 1px;
}
.g-body { flex: 1; min-width: 0; }
.g-body h3 { margin: 0 0 2px; font-size: 16px; line-height: 1.1; letter-spacing: .3px; }
.g-stars { color: #d4202a; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.g-body p { margin: 0; font-size: 13.5px; line-height: 1.3; color: #2a2620; }
.g-body p b { letter-spacing: .5px; }
.g-actions { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.g-actions button {
  font: 700 12px 'Archivo Narrow', sans-serif;
  letter-spacing: 1px;
  padding: 2px 8px;
  border: 1.5px solid #1b1b1b;
  background: transparent;
  cursor: pointer;
}
.g-actions .g-watch { background: #1b1b1b; color: #efe6cf; }
.g-actions button:hover:not(:disabled) { background: #d4202a; border-color: #d4202a; color: #fff; }
.g-actions button:disabled { border-style: dashed; cursor: default; }
.g-or { font-size: 12px; font-style: italic; color: #5b5040; }
.g-actions select { font: 12px 'Archivo Narrow', sans-serif; background: transparent; border: 1px solid #8a7a58; max-width: 190px; }
.g-thumb {
  width: 112px;
  height: 63px;
  flex: none;
  object-fit: cover;
  filter: grayscale(1) contrast(1.35) brightness(1.05) sepia(.25);
  mix-blend-mode: multiply;
  border: 1px solid #1b1b1b;
}

.g-line { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px dotted #8a7a58; }
.g-line.on { background: rgba(212, 32, 42, .08); }
.g-ch {
  width: 30px;
  height: 30px;
  flex: none;
  border: 2px solid #1b1b1b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.g-name { flex: 1; font-weight: 700; font-size: 16px; letter-spacing: .3px; }
.g-name.dim { font-weight: 400; font-style: italic; color: #7a6d55; }
.g-tune {
  font: 700 12px 'Archivo Narrow', sans-serif;
  letter-spacing: 1px;
  padding: 3px 10px;
  border: 1.5px solid #1b1b1b;
  background: transparent;
  cursor: pointer;
}
.g-tune:hover { background: #d4202a; border-color: #d4202a; color: #fff; }

.g-foot {
  border-top: 3px double #1b1b1b;
  margin-top: 8px;
  padding-top: 6px;
  font-size: 12px;
  text-align: center;
  color: #3a3226;
}
.g-foot b { background: #d4202a; color: #fff; padding: 0 3px; }