/* Our Tapes: the wordmark (a strip of masking tape with a marker title) + a small link to jeremiahdaws.com.
   Sits in the top corner opposite the light switches; quiet until hovered; out of the way of the movie. */
.brand { position: fixed; z-index: 69; top: calc(10px + var(--sat, 0px)); left: calc(14px + var(--sal, 0px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none;
  transition: opacity .5s ease; }
.brand-mark { display: block; padding: 5px 12px 4px; transform: rotate(-2.5deg);
  background: linear-gradient(180deg, rgba(236,222,186,.95), rgba(219,200,156,.95));
  clip-path: polygon(0 8%, 3% 0, 96% 5%, 100% 0, 99% 94%, 96% 100%, 4% 94%, 0 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
  font: 400 17px/1 'Permanent Marker', cursive; color: #a3101a; letter-spacing: .02em; white-space: nowrap; }
.brand-mark small { font-size: 11px; color: #2a2418; margin-left: 4px; }
.brand-by { pointer-events: auto; margin-left: 4px; padding: 3px 2px; border-radius: 3px;
  font: 600 11px/1.2 Archivo, system-ui, sans-serif; letter-spacing: .04em; color: rgba(243,226,191,.62);
  text-decoration: none; text-shadow: 0 1px 2px #000; transition: color .2s; }
.brand-by:hover, .brand-by:focus-visible { color: #fff3d6; }
.brand-by:focus-visible { outline: 2px solid rgba(255,236,200,.8); outline-offset: 2px; }
html.cin-dark .brand { opacity: 0; }
.brand.dim { opacity: .28; }
.brand.dim:hover, .brand.dim:focus-within { opacity: 1; }
/* phone portrait: the switches live top-left, so the brand takes the right */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  .brand { left: auto; right: calc(10px + var(--sar, 0px)); top: calc(8px + var(--sat, 0px)); align-items: flex-end; }
  .brand-mark { font-size: 12px; padding: 3px 8px 2px; }
  .brand-by { font-size: 9.5px; margin: 0 4px 0 0; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .brand { top: calc(6px + var(--sat, 0px)); left: calc(10px + var(--sal, 0px)); }
  .brand-mark { font-size: 13px; padding: 3px 8px 2px; }
  .brand-by { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .brand { transition: none; } }