/*
Theme Name: Shelley Evans
Theme URI: https://shelleyevans.com/
Author: Shelley Evans
Description: A lean, editorial WordPress theme based on the approved A12 Two Doors direction.
Version: 0.5.5
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: shelley-evans
*/

@font-face {
  font-family: "Lora Local";
  src: url("assets/fonts/Lora-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Lora Local";
  src: url("assets/fonts/Lora-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --se-paper: #fff;
  --se-ink: #141414;
  --se-muted: #6f6f6f;
  --se-rule: #e4e2dd;
  --se-orange: #d9782e;
  --se-serif: "Lora Local", Charter, "Iowan Old Style", Georgia, serif;
  --se-sans: "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif;
  --se-width: 72.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--se-paper);
  color: var(--se-ink);
  font-family: var(--se-serif);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.admin-bar .site-header { top: 2rem; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .18em; }
a:hover { color: var(--se-orange); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--se-orange); outline-offset: 4px; }
p, ul, ol { margin: 0 0 1.25rem; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.2; }
.site-shell { width: min(100% - 5rem, var(--se-width)); margin-inline: auto; }
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  min-height: 5.25rem;
  padding-inline: max(2.5rem, calc((100vw - var(--se-width)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--se-paper);
}
#main-content { padding-top: 5.25rem; }
.wordmark, .quiet-link, .door, .eyebrow, .credit-meta, .quote-source, .note-date, .archive-nav {
  font-family: var(--se-sans);
}
.site-header .wordmark { flex: 0 0 auto; color: var(--se-orange); font-size: 1.4rem; text-decoration: none; text-transform: lowercase; white-space: nowrap; }
.quiet-link, .door {
  color: var(--se-orange);
  font-size: .72rem;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}
.inner-nav { display: flex; gap: 1.6rem; align-items: center; }
.inner-nav a { color: var(--se-orange); font-family: var(--se-sans); font-size: .8rem; text-decoration: none; }
.home-hero { max-width: 40ch; padding: 3.5rem 0 5rem; }
.home-hero h1 { max-width: 10ch; font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: -.01em; }
.home-now { margin-top: 1.4rem; color: #444; }
.eyebrow {
  display: block;
  margin-bottom: .38rem;
  color: var(--se-muted);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-door {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 3rem;
  padding-bottom: 3.5rem;
}
.home-door-link { color: inherit; text-decoration: none; }
.home-door-link:hover .home-quote, .home-door-link:hover .home-excerpt { color: var(--se-orange); }
.door { padding-top: .5rem; }
.home-quote, .home-excerpt { max-width: 48ch; font-size: 1.5rem; line-height: 1.3; }
.home-excerpt { color: #333; font-style: italic; }
.quote-source {
  margin-top: .5rem;
  color: var(--se-muted);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.content-header { padding: 3.5rem 0 2.5rem; }
.content-header h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.prose { max-width: 44rem; padding-bottom: 5rem; }
.prose h2 { margin: 2.75rem 0 1rem; font-size: 1.65rem; }
.prose h3 { margin: 2rem 0 .75rem; font-size: 1.3rem; }
.prose a { color: var(--se-orange); }
.notes-list { max-width: 48rem; padding-bottom: 5rem; }
.note-card { padding: 2rem 0; border-top: 1px solid var(--se-rule); }
.note-card:first-child { border-top: 0; padding-top: 0; }
.note-card h2 { font-size: 1.6rem; }
.note-card h2 a { text-decoration: none; }
.note-date, .credit-meta { color: var(--se-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.note-date { display: block; margin: .45rem 0 .8rem; }
.note-excerpt { margin-bottom: 0; color: #444; }
.excerpt-more { color: var(--se-orange); text-decoration: none; }
.archive-nav { display: flex; justify-content: space-between; padding: 1.5rem 0 4rem; font-size: .8rem; }
.archive-nav a { color: var(--se-orange); text-decoration: none; }
.notes-header { max-width: 46rem; padding: 3.5rem 0 3.75rem; }
.notes-header p { margin: 0; color: #333; font-size: 1.35rem; line-height: 1.45; }
.curated-notes { max-width: 60rem; padding-bottom: 6rem; }
.notes-group, .notes-lines {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 2.75rem;
  margin-top: 4.5rem;
}
.notes-group:first-child { margin-top: 0; }
.notes-group-title {
  padding-top: .28rem;
  color: var(--se-orange);
  font: .72rem/1.4 var(--se-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.notes-group-list, .notes-lines-list { border-top: 1px solid var(--se-rule); }
.curated-note { padding: 1rem 0; border-bottom: 1px solid var(--se-rule); }
.curated-note h3 { font-size: 1.15rem; }
.curated-note h3 a, .note-opening a { text-decoration: none; }
.curated-note .note-date { margin: .3rem 0 0; }
.curated-note.is-featured { padding: 1.45rem 0 1.55rem; }
.curated-note.is-featured h3 { font-size: 1.5rem; }
.note-opening { max-width: 44rem; margin: .7rem 0 0; color: #444; font-size: 1.08rem; font-style: italic; }
.notes-lines-list blockquote { margin: 0; padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--se-rule); }
.notes-lines-list blockquote p { margin: 0; font-size: 1.08rem; }
.notes-lines-list time { display: block; margin-top: .35rem; color: var(--se-muted); font: .68rem var(--se-sans); letter-spacing: .06em; text-transform: uppercase; }
.single-note-header { max-width: 44rem; padding-bottom: 1.75rem; }
.note-prose { font-size: 1.08rem; }
.note-prose > :first-child { margin-top: 0; }
.filmography { padding: 3.5rem 0 5rem; }
.filmography-section { margin-top: 4rem; }
.filmography-section:first-child { margin-top: 0; }
.section-heading { margin-bottom: 1.75rem; font-size: 2.15rem; }
.filmography-primary-heading { font-size: clamp(2.5rem, 5vw, 3.25rem); }
.featured-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 2.5rem; }
.featured-credit { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 1.5rem; }
.credit-poster { background: #f4f3f0; aspect-ratio: 2 / 3; object-fit: cover; }
.credit-title { margin: .35rem 0 .6rem; font-size: 1.4rem; }
.credit-detail { color: #444; font-size: 1rem; }
.credit-proof { margin-top: 1rem; font-style: italic; }
.credit-proof-source { display: block; margin-top: .35rem; color: var(--se-muted); font: .68rem var(--se-sans); letter-spacing: .1em; text-transform: uppercase; }
.credit-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--se-rule); }
.credit-list li { padding: .75rem 0; border-bottom: 1px solid var(--se-rule); }
.commission-note { max-width: 46rem; color: #444; }
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 15, 15, .94);
}
.video-lightbox[hidden] { display: none; }
.video-lightbox__dialog { position: relative; width: min(100%, 64rem); }
.video-lightbox__video {
  width: 100%;
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  margin: 0 auto;
  background: #000;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
}
.video-lightbox__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 300 2.25rem/1 var(--se-sans);
}
.video-lightbox__close:hover { color: var(--se-orange); }
body.has-video-lightbox { overflow: hidden; }
.about-page { padding: 3.5rem 0 5rem; }
.about-visual-group { max-width: 57rem; }
.about-intro { display: grid; grid-template-columns: minmax(17.5rem, 24.375rem) minmax(0, 1fr); gap: clamp(3rem, 7vw, 5.5rem); align-items: stretch; }
.about-portrait-image { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.about-copy-stack { display: flex; flex-direction: column; gap: 4.75rem; padding-top: .125rem; }
.about-copy-stack .prose { padding-bottom: 0; font-size: 1rem; }
.about-awards-section { width: 100%; margin-top: 4rem; }
.about-awards-section h2 { margin-bottom: 1.5rem; text-align: center; font-size: 1.9rem; }
.about-awards { max-width: 50rem; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--se-rule); }
.about-awards li { padding: .8rem 0; border-bottom: 1px solid var(--se-rule); font-size: 1rem; }
.about-contact { margin: 3rem auto 0; color: var(--se-muted); font: .68rem/1.7 var(--se-sans); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.about-contact a { display: block; color: var(--se-orange); text-decoration: none; }
.about-contact p { margin: 0; }
.empty-state { color: var(--se-muted); font-style: italic; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 48rem) {
  body.admin-bar .site-header { top: 2.875rem; }
  .site-shell { width: min(100% - 2.75rem, var(--se-width)); }
  .site-header { min-height: 4rem; padding-inline: 1.375rem; }
  #main-content { padding-top: 4rem; }
  .site-header .wordmark { font-size: 1.2rem; }
  .inner-nav { gap: .9rem; }
  .inner-nav a { font-size: .7rem; }
  .home-hero { padding: 2rem 0 3rem; }
  .home-door { grid-template-columns: 1fr; gap: .65rem; padding-bottom: 2.5rem; }
  .home-quote, .home-excerpt { font-size: 1.3rem; }
  .notes-header { padding: 2.25rem 0 2.75rem; }
  .notes-header p { font-size: 1.25rem; }
  .notes-group, .notes-lines { grid-template-columns: 1fr; gap: .75rem; margin-top: 3.5rem; }
  .notes-group-title { padding-top: 0; }
  .featured-credits { grid-template-columns: 1fr; }
  .about-intro { grid-template-columns: 1fr; gap: 2rem; }
  .about-portrait { max-width: 22rem; }
  .about-copy-stack { gap: 2.5rem; }
  .about-awards-section { margin-top: 3rem; transform: none; }
  .about-contact { margin-top: 2.5rem; }
}

@media (max-width: 34rem) {
  .featured-credit { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
