/* ted-knight.com — static site styles
   Warm archival palette chosen to sit behind black-and-white photography. */

:root {
  --paper:      #fbf7f0;
  --surface:    #ffffff;
  --surface-2:  #f4ece0;
  --ink:        #2a1d14;
  --ink-muted:  #6b5847;
  --rule:       #e2d6c6;
  --accent:     #a6421f;
  --accent-ink: #8a3517;
  --gold:       #9a7020;
  --masthead:   #2a1d14;
  --masthead-ink: #f6ede0;
  --wm-fade-1: #c9922f;
  --wm-fade-2: #8f3a17;
  --shadow:     0 1px 2px rgba(42, 29, 20, .10), 0 6px 18px rgba(42, 29, 20, .07);
  --radius:     3px;
  --measure:    68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #16100a;
    --surface:    #1f1710;
    --surface-2:  #261d14;
    --ink:        #ece1d2;
    --ink-muted:  #a89680;
    --rule:       #3a2c1f;
    --accent:     #e29068;
    --accent-ink: #f0ab88;
    --gold:       #d4a852;
    --masthead:   #0f0a06;
    --masthead-ink: #f0e5d5;
    --shadow:     0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.65 Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  text-rendering: optimizeLegibility;
}

/* ---------- links ---------- */

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- skip link ---------- */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: .7rem 1.1rem; z-index: 100;
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- masthead ---------- */

.masthead {
  background: var(--masthead);
  color: var(--masthead-ink);
  border-bottom: 3px solid var(--gold);
}

.masthead__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.9rem 1.25rem 1.6rem;
}

.masthead__tagline {
  margin: .6rem 0 0;
  font-size: 1rem;
  font-style: italic;
  color: color-mix(in srgb, var(--masthead-ink) 72%, transparent);
}

/* ---------- navigation ---------- */

.nav {
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.nav__list {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 .75rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
}
.nav__list a {
  display: block;
  padding: .75rem .85rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.nav__list a:hover { color: var(--ink); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.nav__list a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

/* ---------- hero band ---------- */

.hero {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 300;
  max-height: 300px;
  object-fit: cover;
  object-position: 72% center;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

/* ---------- layout ---------- */

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.page-title {
  margin: 0 0 1.75rem;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
}
.page-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: .75rem;
  background: var(--gold);
}

.section-title {
  margin: 3rem 0 .25rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.section-note {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-muted);
  font-style: italic;
  font-size: .95rem;
}

.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15em; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: 1.45rem; font-weight: 400;
  margin: 2.2rem 0 .8rem; line-height: 1.25;
}
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; }

blockquote {
  margin: 1.5rem 0;
  padding: .3rem 0 .3rem 1.4rem;
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--ink-muted);
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

address {
  font-style: normal;
  font-size: .9rem;
  color: var(--ink-muted);
  letter-spacing: .03em;
  margin-top: 2rem;
}

/* ---------- figures ---------- */

figure { margin: 1.8rem 0; }
figure img { display: block; max-width: 100%; height: auto; }
figcaption {
  margin-top: .6rem;
  font-size: .88rem;
  color: var(--ink-muted);
  font-style: italic;
}

.figure--inset {
  float: right;
  width: min(280px, 42%);
  margin: .35rem 0 1.2rem 1.8rem;
}

.mount {
  background: var(--surface);
  padding: .55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- gallery ---------- */

.gallery {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.1rem;
}
.gallery li { margin: 0; }
.gallery a {
  display: block;
  background: var(--surface);
  padding: .5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gallery a:hover, .gallery a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(42, 29, 20, .12), 0 12px 26px rgba(42, 29, 20, .13);
}
.gallery img {
  display: block;
  width: 100%;
  height: 165px;
  object-fit: cover;
  background: var(--surface-2);
}

.gallery--tall img { height: 240px; }

/* Contact-sheet grid for images that exist only as small scans: shown at
   native size rather than upscaled into blur. */
/* Doubled class so the responsive .gallery rules further down cannot widen
   these fixed 100px columns back out. */
.gallery.gallery--contact {
  grid-template-columns: repeat(auto-fill, 100px);
  gap: .75rem;
  justify-content: start;
}
.gallery--contact img {
  width: 100px;
  height: 100px;
  display: block;
  background: var(--surface);
  padding: .3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: contain;
}

.note-after-gallery { margin-top: 1rem; }

/* ---------- track list ---------- */

.tracks { list-style: none; margin: 1.8rem 0 0; padding: 0; counter-reset: track; }
.tracks li {
  counter-increment: track;
  padding: .95rem 0;
  border-top: 1px solid var(--rule);
}
.tracks li:last-child { border-bottom: 1px solid var(--rule); }
.tracks .track__name {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: 1.02rem;
  margin-bottom: .5rem;
}
.tracks .track__name::before {
  content: counter(track, decimal-leading-zero);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .05em;
  flex: none;
}
.tracks audio { width: 100%; height: 36px; display: block; }

.callout {
  margin: 2rem 0;
  padding: 1.15rem 1.35rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

/* ---------- article cards ---------- */

.cards { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
}
.card h2 { margin: 0 0 .35rem; font-size: 1.3rem; font-weight: 400; }
.card h2 a { text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.card__meta {
  margin: 0 0 .7rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.card p:last-child { margin-bottom: 0; }

.entry-meta {
  margin: -1rem 0 2rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- playbill ---------- */

.cast {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.cast caption {
  text-align: left;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: .7rem;
}
.cast td { padding: .5rem; border-bottom: 1px solid var(--rule); }
.cast td:last-child { text-align: right; font-variant: small-caps; letter-spacing: .03em; }
.cast tr:last-child td { border-bottom: 0; }

.scenes { list-style: none; margin: 1.5rem 0; padding: 0; max-width: 34rem; }
.scenes li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.scenes .scenes__when { color: var(--ink-muted); font-style: italic; }
.scenes li.scenes__break {
  justify-content: center;
  border-bottom: 0;
  font-style: italic;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--gold);
  padding: 1rem 0;
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  margin-top: 3rem;
}
.footer__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .85rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}
.footer p { margin: 0; }

/* ---------- lightbox ---------- */

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(12, 8, 4, .92); }
.lightbox__figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.5rem 1rem 2rem;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.lightbox__caption {
  color: #e8ddcd;
  font-size: .9rem;
  font-style: italic;
  text-align: center;
  max-width: 60ch;
}
.lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, .10);
  color: #f6ede0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .figure--inset { float: none; width: 100%; margin: 1.5rem 0; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
  .gallery img { height: 130px; }
  .gallery--tall img { height: 190px; }
  .wrap { padding: 1.8rem 1rem 2.5rem; }
  /* Seven menu items wrap to several rows on a phone; tighten them up. */
  .nav__list { padding: .3rem .5rem; gap: 0; }
  .nav__list a { padding: .5rem .6rem; font-size: .78rem; letter-spacing: .06em; border-bottom-width: 2px; }
  .masthead__inner { padding: 1.4rem 1rem 1.2rem; }
  .masthead__inner { row-gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gallery a:hover, .gallery a:focus-visible { transform: none; }
}

/* ---------- "Where to watch!" button ---------- */

.masthead__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.masthead__id { min-width: 0; }

.masthead__watch {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Set by watch.js from the stamp the cron job writes; hidden until then. */
.watch-updated[hidden] { display: none; }
.watch-updated {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--masthead-ink) 58%, transparent);
  white-space: nowrap;
}

/* Hidden until watch.js reveals it, so it is never a dead control. */
.watch-btn[hidden] { display: none; }
.watch-btn {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  padding: .5rem .7rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--masthead-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.watch-btn:hover { color: var(--gold); }
.watch-btn:hover .watch-tv__screen { fill: var(--gold); }
.watch-tv { display: block; width: 52px; height: auto; }
.watch-tv__body   { fill: none; stroke: currentColor; stroke-width: 3.5; }
.watch-tv__screen { fill: color-mix(in srgb, currentColor 22%, transparent); transition: fill .15s ease; }
.watch-tv__knob   { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .watch-tv__screen { transition: none; }
}

/* ---------- watch panel ---------- */

.watch {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}
.watch::backdrop { background: rgba(12, 8, 4, .82); }
.watch__inner {
  background: var(--paper);
  color: var(--ink);
  max-width: 660px;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 3rem);
  margin: 1.5rem auto;
  padding: 1.5rem 1.6rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  overflow-y: auto;
}
.watch__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.watch__title { margin: 0; font-size: 1.5rem; font-weight: 400; }
.watch__close {
  flex: none; background: transparent; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--ink-muted); padding: .2rem .4rem;
}
.watch__close:hover { color: var(--ink); }
.watch__sub { margin: .4rem 0 1.2rem; color: var(--ink-muted); font-size: .92rem; font-style: italic; }
.watch__loading { color: var(--ink-muted); }

.watch__list { list-style: none; margin: 0; padding: 0; }
.watch__item { padding: 1rem 0; border-top: 1px solid var(--rule); }
.watch__item:first-child { border-top: 0; padding-top: 0; }
.watch__name { margin: 0; font-size: 1.1rem; font-weight: 400; }
.watch__name a { text-decoration: none; }
.watch__name a:hover { text-decoration: underline; }
.watch__meta {
  margin: .15rem 0 .6rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted);
}
.watch__offer { display: flex; align-items: flex-start; gap: .6rem; margin: .35rem 0; flex-wrap: wrap; }
.watch__kind {
  flex: none; min-width: 3.6rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); padding-top: .35rem;
}
.watch__offer--free .watch__kind { color: var(--accent); }
.watch__provs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.watch__prov {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  padding: .2rem .7rem .2rem .25rem; font-size: .84rem;
}
.watch__prov img { border-radius: 50%; display: block; }

.watch__rest { margin-top: 1.4rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.watch__rest summary {
  cursor: pointer; color: var(--ink-muted);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.watch__rest ul { margin: .8rem 0 0; padding-left: 1.1rem; columns: 2; column-gap: 1.5rem; font-size: .9rem; }
.watch__rest li { margin-bottom: .25rem; break-inside: avoid; }
.watch__rest span { color: var(--ink-muted); }
.watch__attr {
  margin: 1.4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule);
  font-size: .78rem; color: var(--ink-muted);
}

@media (max-width: 640px) {
  /* The tagline is long enough to push the button onto its own line. When it
     wraps, lay it out horizontally and keep it against the right edge rather
     than leaving it stranded under the text. */
  .watch-btn {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    margin: .2rem 0 0 auto;
    font-size: .7rem;
    padding: .35rem .5rem;
  }
  .watch-tv { width: 34px; }
  .masthead__watch { margin: .2rem 0 0 auto; align-items: flex-end; }
  .watch-btn { margin: 0; }
  .watch-updated { font-size: .64rem; margin-top: .15rem; }
  .watch__inner { padding: 1.2rem 1rem 1.3rem; margin: .75rem auto; width: calc(100% - 1.5rem); }
  .watch__rest ul { columns: 1; }
}

/* ---------- masthead wordmark ---------- */
/* Archivo Black (SIL Open Font License 1.1), self-hosted: the site's CSP is
   default-src 'self', and loading this from Google's CDN would be blocked —
   as well as putting a third-party request on every page view. Latin subset
   only, 18KB. */

@font-face {
  font-family: "TK Display";
  src: url("/assets/fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.masthead__title {
  /* Space for the two fade bands, which hang ~.26em below the baseline and
     would otherwise crowd the tagline. In em so it tracks the clamped size. */
  margin: 0 0 .34em;
  font-family: "TK Display", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  font-size: clamp(1.9rem, 6.6vw, 3.05rem);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1;
  text-transform: uppercase;
}
.masthead__title a {
  color: var(--masthead-ink);
  text-decoration: none;
  /* Three-level fade, straight down — the Mary Tyler Moore titles stacked the
     name vertically in bands of colour. Offsets are in em so they track the
     font size at every breakpoint. */
  text-shadow:
    0 .13em 0 var(--wm-fade-1),
    0 .26em 0 var(--wm-fade-2);
}
.masthead__title a:hover { color: var(--gold); }