/* Editorial refinement: warm paper, forest ink, and the films themselves. */
:root { --paper: #f4f0e7; --forest: #10281f; --shadow: #1c382d; --cream: #f4f0e7; --mist: #c2c7bd; --pad: clamp(24px,4.4vw,72px); --section: 104px; }
em { font-weight: 400; color: #b9a482; }
.section--cream em, .opening em { color: #776044; }
.header { background: var(--paper); color: var(--forest); padding-top: 23px; padding-bottom: 23px; border-bottom: 1px solid #10281f20; }
.header .wordmark { color: var(--forest); font-size: 29px; }
.header .nav a, .header .burger { color: var(--forest); }
.header .nav__cta { background: var(--forest); color: var(--cream) !important; border: 0; padding: 12px 24px; }
.nav { gap: 28px; }
.eyebrow { font-size: 10px; letter-spacing: .16em; }
.btn { border-radius: 3px; min-height: 52px; padding: 15px 25px; font-size: 14px; }
.btn--ghost { border-color: #eeeBDD65; }
.btn:hover { transform: translateY(-2px); }
.opening { background: var(--paper); color: var(--forest); padding: 72px var(--pad) 80px; }
.opening__grid { display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: clamp(36px,5vw,80px); }
.opening__copy { max-width: 590px; }
.opening .eyebrow { color: #596658; line-height: 1.6; margin-bottom: 26px; }
.opening h1 { font-size: clamp(54px,5.5vw,86px); line-height: 1.02; letter-spacing: -.035em; }
.opening__lede { font-size: 16px; line-height: 1.7; color: #43594d; margin: 28px 0; }
.opening .btn--primary { background: var(--forest); color: var(--cream); }
.opening .row { gap: 20px; }
.text-action { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; min-height: 44px; border-bottom: 1px solid #10281f45; }
.opening__signature { font-size: 10px; color: #5b6c5f; margin-top: 30px; letter-spacing: .02em; }
.opening__frame { padding: 10px; background: #fffaf2; border: 1px solid #10281f20; box-shadow: 0 20px 60px #16312414; transform: rotate(1.1deg); }
.opening__frame:has(.is-playing) { transform: none; }
.opening .card { color: var(--forest); gap: 16px; }
.opening .card__caption { padding: 0 12px 7px; }
.opening .card__title { font-size: 31px; }
.opening .card__meta, .opening .card__external { color: #4d6154; }
.opening__hint { color: #596658; font-size: 11px; margin-top: 24px; text-align: center; }
.opening .film { border-radius: 0; }
.trust-strip { background: #e9e4d8; border: 0; padding-top: 19px; padding-bottom: 19px; }
.trust-strip .wrap, .trust-strip .wrap span:first-child { color: #4b5c50; font-size: 11px; }
.section--cream { background: var(--paper); }
.h2 { font-size: clamp(40px,4.3vw,64px); line-height: 1.08; }
.h1--page { font-size: clamp(55px,7vw,100px); }
@media (min-width: 761px) { .head-row { align-items: flex-end; } }
.head-row .lede { max-width: 340px; font-size: 15px; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.story-grid .card:nth-child(2) { margin-top: 72px; }
.film { border-radius: 2px; }
.film__play, .film--wide .film__play { width: auto; height: 48px; min-width: 124px; border-radius: 2px; padding: 0 18px; gap: 12px; background: #f4f0e7ed; color: var(--forest); border: 0; box-shadow: 0 3px 20px #0002; }
.film__play span { font-size: 12px; font-weight: 600; }
.film__play:hover { color: var(--forest); background: #fff; }
.film__poster { transition: filter .25s ease; }
.film:hover .film__poster { filter: brightness(1.06); }
.card__caption, .card--wide .card__caption { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; }
.card__title, .card--wide .card__title { font-size: 31px; }
.card__meta { font-size: 12px; }
.card__external { grid-column: 1; min-height: 32px; font-size: 11px; padding: 2px 0; }
.film-close { display: none; background: none; color: inherit; padding: 8px 0; border: 0; font-size: 12px; grid-column: 2; grid-row: 2; }
.card:has(.is-playing) .film-close { display: inline-block; }
.film-follow { border-top: 1px solid var(--hair); padding-top: 28px; }
.link { font-size: 14px; }
.rule-list > * { padding: 28px 0; }
.rule-list .muted { font-size: 15px; }
.filmmaker { grid-template-columns: .8fr 1.2fr; max-width: 1100px; }
.filmmaker__title { border-left: 1px solid var(--brass); padding-left: 30px; }
.filmmaker p { font-size: 16px; }
.filmmaker .eyebrow { font-size: 10px; }
.tiers { gap: 20px; }
.tier, .tier:first-child, .tier:last-child { border-radius: 3px; padding: 30px; }
.tier__marker { border-radius: 2px; font-size: 10px; padding: 7px 9px; }
.tier__price .num { font-size: 43px; }
.tier--featured { background: var(--paper); color: var(--forest); }
.tier--featured .muted, .tier--featured .from { color: #526658; }
.tier--featured .tier__marker { border-color: #776044; }
.tier--featured .link { color: var(--forest); }
.tier .dash-list { gap: 15px; }
.tier .dash-list li { font-size: 13px; }
.tier .muted { font-size: 14px !important; }
.faq-list summary { font-size: 26px; }
.faq-list p { font-size: 15px; }
#contact.section { background: var(--paper); color: var(--forest); }
#contact .eyebrow, #contact .lede, #contact .muted, #contact .small { color: #4d6254; }
#contact .g12 { align-items: start; }
#contact .h2 { max-width: 450px; }
.inquiry-panel { background: #ebe6da; padding: 34px; border: 1px solid #10281f15; }
#contact .form .field label { color: var(--forest); font-size: 12px; }
#contact .form .field label span { color: #526658; }
#contact .form .field input, #contact .form .field textarea { color: var(--forest); background: #fffbf5; border: 1px solid #10281f35; border-radius: 2px; }
#contact .form input::placeholder, #contact .form textarea::placeholder { color: #637368; }
#contact .btn--primary { background: var(--forest); color: var(--cream); }
#contact .form__actions { gap: 14px; }
.form { gap: 20px; }
.about-copy p { font-size: 17px; }
.footer { padding-top: 48px; padding-bottom: 40px; }
.footer__inner { flex-wrap: wrap; }
.footer__brand { max-width: 330px; }
.footer__nav { gap: 14px 24px; }
.footer__nav a { font-size: 12px; }
.footer__copy { width: 100%; font-size: 11px; padding-top: 20px; border-top: 1px solid var(--hair); }
.sticky-cta .btn { border-radius: 3px; min-height: 46px; }
@media (min-width: 761px) and (max-width: 1150px) {
 .opening__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
 .opening h1 { font-size: 62px; }
 .card__caption, .card--wide .card__caption { grid-template-columns: 1fr; }
 .card__meta { grid-row: 2; }
 .tier, .tier:first-child, .tier:last-child { padding: 22px; }
 .inquiry-panel { padding: 24px; }
}
@media (max-width: 760px) {
 :root { --pad: 22px; --section: 68px; }
 .header { padding-top: 16px; padding-bottom: 16px; }
 .header .wordmark { font-size: 24px; }
 .opening { padding: 38px var(--pad) 42px; }
 .opening__grid { display: flex; flex-direction: column; gap: 32px; }
 .opening__copy { max-width: 100%; width: 100%; }
 .opening .eyebrow { margin-bottom: 19px; font-size: 9px; letter-spacing: .105em; }
 .opening h1 { font-size: clamp(49px,12.7vw,74px); line-height: 1.04; }
 .opening__lede { font-size: 15px; margin: 21px 0; }
 .opening .row { flex-direction: row; gap: 12px 20px; }
 .opening .row .btn { width: auto; }
 .opening .text-action { font-size: 12px; }
 .opening__signature { margin-top: 20px; font-size: 10px; max-width: 300px; }
 .opening__media { width: 100%; }
 .opening__frame { transform: none; padding: 6px; }
 .opening .card { gap: 12px; }
 .opening .card__caption { padding: 0 8px 6px; }
 .opening .card__title { font-size: 26px; }
 .opening__hint { margin-top: 14px; font-size: 10px; }
 .trust-strip { padding-top: 20px; padding-bottom: 20px; }
 .trust-strip .wrap { gap: 7px; }
 .h2 { font-size: 43px; }
 .h1--page { font-size: 55px; }
 .story-grid { display: flex; flex-direction: column; gap: 38px; }
 .story-grid .card:nth-child(2) { margin-top: 0; }
 .card__caption, .card--wide .card__caption { grid-template-columns: 1fr; gap: 6px; }
 .card__meta { grid-row: 2; }
 .card__external { grid-row: 3; min-height: 40px; }
 .film-close { grid-column: 1; grid-row: 4; justify-self: start; min-height: 44px; }
 .card__title, .card--wide .card__title { font-size: 29px; }
 .film__play, .film--wide .film__play { width: auto; height: 46px; min-width: 116px; }
 .film-follow { gap: 24px; }
 .film-follow .btn { font-size: 13px; }
 .filmmaker { grid-template-columns: 1fr; gap: 25px; }
 .filmmaker__title { padding-left: 20px; }
 .tier, .tier:first-child, .tier:last-child { padding: 28px 23px; }
 .tier__price .num { font-size: 40px; }
 .inquiry-panel { padding: 23px 18px; }
 #contact .form .field input, #contact .form .field textarea { font-size: 16px; }
 .form .btn { width: 100%; }
 .footer__copy { padding-top: 18px; }
 .menu .wordmark { font-size: 23px; }
 .sticky-cta { padding: 9px 14px calc(9px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion: reduce) { .film__poster { transition: none; } }
@media (max-width: 380px) {
 :root { --pad: 18px; }
 .header .wordmark, .menu .wordmark { font-size: 20px; gap: 8px; }
 .header { gap: 10px; }
 .opening h1 { font-size: 48px; }
 .opening .row { flex-direction: column; align-items: stretch; }
 .opening .row .btn { width: 100%; }
 .opening .text-action { align-self: flex-start; }
 .h2 { font-size: 38px; }
 .inquiry-panel { padding: 22px 14px; }
}

/* Center section introductions when desktop heading rows stack on phones. */
@media (max-width: 760px) {
  .head-row { align-items: center; text-align: center; }
  .head-row > * { width: 100%; margin-left: auto; margin-right: auto; }
  .head-row > .stack { align-items: center; }
  .head-row .h2, .head-row .eyebrow { width: 100%; }
  .head-row .lede { max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* Keep Liam's portrait prominent, with a single-column layout on phones. */
.portrait--liam { aspect-ratio: 3 / 4; padding: 0; }
.portrait--liam img { object-position: center top; transform: scale(1.12); transform-origin: center top; }
.filmmaker--portrait { align-items: center; gap: clamp(32px, 6vw, 80px); }
@media (max-width: 760px) {
  .filmmaker--portrait { grid-template-columns: minmax(0, 1fr); }
  .filmmaker--portrait .portrait { width: 100%; max-width: 440px; margin-inline: auto; }
}

.wordmark .brand-mountains { width: 28px; height: 22px; }
.wordmark--sm .brand-mountains { width: 24px; height: 19px; }
@media (max-width: 380px) {
 .wordmark .brand-mountains { width: 24px; height: 19px; }
}