/* Ellis Family Guides — September 2026 editorial refresh. */
:root { --ink-mute: #645e52; }
.home-refresh { font-size: 19px; }
.home-refresh .section-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 44px; }
.home-refresh h2 { font-size: clamp(29px, 3.2vw, 43px); line-height: 1.18; }
.home-refresh .eyebrow { font-size: 12px; letter-spacing: 2.2px; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 20; padding: 12px; background: white; color: var(--navy); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.masthead { padding: 23px 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: 1440px; width: 100%; margin: auto; border-bottom: 1px solid var(--line); }
.wordmark { color: var(--navy); text-decoration: none; font-size: 29px; line-height: 1; letter-spacing: 4px; }
.wordmark span { font-family: var(--sans); display: block; font-size: 10px; letter-spacing: 2.8px; margin-top: 7px; }
.masthead nav { display: flex; gap: 30px; flex-wrap: wrap; }
.masthead nav a { font: 14px var(--sans); color: var(--navy); text-decoration: none; padding: 8px 0; }
.masthead nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.home-hero { display: grid; grid-template-columns: 1fr 1fr; max-width: 1440px; width: 100%; margin: auto; min-height: 630px; }
.hero-copy { padding: 68px 40px 68px max(44px, calc((100vw - 1152px)/2)); }
.hero-copy .eyebrow { max-width: 380px; line-height: 1.7; margin-bottom: 25px; }
.hero-copy h1 { color: var(--navy); font-size: clamp(42px,4.9vw,70px); line-height: 1.06; letter-spacing: -2px; text-wrap: initial; }
.hero-copy h1 em { font-weight: normal; color: var(--gold-dark); }
.hero-intro { margin-top: 28px; max-width: 430px; color: var(--ink); font-size: 20px; line-height: 1.55; }
.hero-note { font-size: 16px; color: var(--ink-soft); }
.hero-actions { display: flex; gap: 12px 24px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.home-refresh .btn { border-radius: 2px; font-size: 15px; padding: 15px 22px; margin: 0; }
.btn span { margin-left: 16px; }
.text-link { display: inline-block; font: 15px/1.6 var(--sans); color: var(--gold-dark); text-underline-offset: 5px; padding-block: 9px; }
.hero-art { position: relative; overflow: hidden; isolation: isolate; background: #d6c8ae; min-height: 590px; }
.hero-scene { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; object-position: 58% center; }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(36,45,39,.05) 55%,rgba(25,39,42,.86)); z-index: 1; pointer-events: none; }
.book-collection { position: absolute; inset: 24% 2% 13%; z-index: 2; }
.hero-book { position: absolute; width: 34%; height: auto; filter: drop-shadow(0 18px 16px #14221d38); }
.hero-book-1 { left: -1%; bottom: 45%; transform: rotate(-4deg); z-index: 2; }
.hero-book-2 { left: 33%; bottom: 48%; transform: rotate(-1deg); z-index: 1; }
.hero-book-3 { right: -1%; bottom: 45%; transform: rotate(4deg); z-index: 3; }
.hero-book-4 { left: 30%; width: 41%; bottom: -4%; transform: rotate(1deg); z-index: 4; }
.collection-caption { position: absolute; bottom: 26px; left: 30px; right: 30px; z-index: 3; color: #f9f4e9; text-align: center; font: 11px var(--sans); letter-spacing: 2.6px; }
.collection-caption span { display: block; font: italic 22px var(--serif); letter-spacing: 0; margin-top: 10px; }
.book-finder { padding-block: 75px 80px; scroll-margin-top: 24px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.section-heading>p { font-size: 16px; color: var(--ink-soft); max-width: 300px; margin-bottom: 0; }
.guide-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }
.tone-navy { --book-color: #2c4a66; }.tone-green { --book-color: #3a5a44; }.tone-burgundy { --book-color: #5e3630; }.tone-gold { --book-color: #7d6122; }
.guide-card { padding: 24px 22px 18px; color: var(--ink); text-decoration: none; border-top: 3px solid var(--book-color); display: flex; flex-direction: column; transition: background .2s; min-width: 0; }
.guide-card+.guide-card { border-left: 1px solid var(--line); }
.guide-card:hover { background: #efeadf; }
.guide-number { font: 12px var(--sans); color: var(--book-color); letter-spacing: 2px; margin-bottom: 20px; }
.guide-card h3 { color: var(--book-color); font-size: 24px; line-height: 1.2; margin-bottom: 15px; }
.guide-card p { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
.guide-title { font: 14px/1.5 var(--sans); color: var(--book-color); margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; }
.guide-title span { padding-left: 4px; }
.film-section { background: var(--navy); padding-block: 64px; color: var(--cream); scroll-margin-top: 10px; }
.film-layout { display: grid; grid-template-columns: .7fr 1.6fr; align-items: center; gap: 50px; }
.film-copy h2 { color: var(--cream); font-size: 43px; margin-bottom: 24px; }
.film-copy .eyebrow { color: #e2c16d; }
.film-copy p { font-size: 18px; }
.film-copy .film-hint { font: 14px/1.6 var(--sans); color: #e0e6e7; margin-top: 25px; }
.videowrap { width: 100%; }
.videowrap video { width: 100%; display: block; border-radius: 3px; background: #203849; }
.video-summary { margin-top: 12px; font: 14px/1.6 var(--sans); }
.film-details { text-align: left; font: 14px/1.6 var(--sans); margin-top: 13px; }
.film-details summary { cursor: pointer; padding-block: 7px; text-decoration: underline; text-underline-offset: 4px; }
.film-details p { margin-top: 14px; }
.film-details a { color: inherit; }
.film-section .film-details { color: #e0e6e7; }
.collection-heading { padding-top: 76px; padding-bottom: 10px; }
.book-feature { padding-block: 48px; }
.book-feature+.book-feature { border-top: 1px solid var(--line); }
.book-feature .inner.wide { max-width: none; }
.feature { display: grid; grid-template-columns: 285px 1fr; align-items: center; gap: 72px; position: relative; }
.feature-book { width: 285px; }
.feature-txt { max-width: 630px; }
.feature-txt h2 { margin-bottom: 18px; color: var(--book-color); }
.feature-txt>.eyebrow { padding-right: 80px; }
.feature-txt>p { font-size: 18px; }
.feature-txt>p:has(.btn) { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.feature-txt .small { font: 14px/1.6 var(--sans); }
.feature-seal { position: absolute; right: 0; top: 0; width: 62px; height: 62px; }
.review { font: 14px/1.6 var(--sans); margin-block: 20px; color: var(--ink-soft); }
.review summary { cursor: pointer; padding-block: 6px; }
.review blockquote { font-family: var(--serif); }
.edition-note { border-left: 2px solid var(--gold-dark); padding-left: 18px; color: var(--gold-dark); font-size: 16px !important; }
.method-section { margin-top: 45px; background: #eeece4; padding-block: 72px; }
.method-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
.method-image { height: 510px; overflow: hidden; }
.method-image img { height: 100%; width: 100%; object-fit: cover; object-position: 83% center; }
.method-copy p { font-size: 17px; }
.method-copy h2 { margin-bottom: 22px; }
.method-copy .rule { display: none; }
.downloads-section { padding-block: 85px; }
.downloads-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.downloads-layout h2 { margin-bottom: 22px; }
.downloads-layout p { font-size: 18px; }
.downloads-layout .download-note { font: 14px/1.6 var(--sans); margin-top: 18px; }
.downloads-layout ul { list-style: none; border-top: 1px solid var(--line); }
.downloads-layout li { border-bottom: 1px solid var(--line); padding-block: 17px; font-size: 19px; }
.downloads-layout li span { font: 12px var(--sans); color: var(--gold-dark); display: inline-block; width: 38px; }
.home-refresh footer { background: var(--navy); color: #e0e6e7; padding-block: 36px; font-size: 14px; }
.home-refresh footer a { color: #f0d695; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: enter-copy .7s ease-out both; }
  .hero-art { animation: enter-copy .9s ease-out both; }
  .motion-ready .reveal.visible { animation: enter-copy .65s ease-out both; }
  @keyframes enter-copy { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 1440px) { .hero-copy { padding-left: 100px; } }
@media (max-width: 1050px) {
  .masthead { padding-inline: 30px; }.masthead nav { gap: 22px; }
  .home-refresh .section-wrap { padding-inline: 30px; }
  .hero-copy { padding: 55px 30px; }.hero-copy h1 { font-size: clamp(40px,4.9vw,51px); }
  .hero-art { min-height: 580px; }.hero-actions { gap: 10px; }
  .guide-grid { grid-template-columns: repeat(2,1fr); }.guide-card:nth-child(3) { border-left: 0; }
  .film-layout { gap: 28px; grid-template-columns: .65fr 1.3fr; }.film-copy h2 { font-size: 35px; }
  .feature { grid-template-columns: 240px 1fr; gap: 40px; }
  .method-layout { gap: 35px; }.downloads-layout { gap: 40px; }
}
@media (max-width: 720px) {
  .masthead { padding: 19px 22px 14px; align-items: start; flex-direction: column; gap: 16px; }
  .wordmark { font-size: 25px; }.masthead nav { width: 100%; gap: 0; justify-content: space-between; }.masthead nav a { font-size: 13px; }
  .home-hero { grid-template-columns: 1fr; }.hero-copy { padding: 40px 24px 34px; }.hero-copy h1 { font-size: clamp(42px,10vw,58px); letter-spacing: -1.5px; }.desktop-break { display: none; }
  .hero-copy .eyebrow { font-size: 11px; margin-bottom: 19px; }.hero-intro { font-size: 19px; margin-top: 24px; }.hero-note { font-size: 15px; }
  .hero-actions { gap: 12px 20px; }.hero-art { min-height: 400px; max-height: 440px; }.book-collection { inset: 8% 5% 18%; }.hero-book { width: 34%; }.hero-book-4 { width: 41%; }
  .collection-caption { bottom: 19px; }.collection-caption span { font-size: 20px; }
  .home-refresh .section-wrap { padding-inline: 24px; }.section-heading { flex-direction: column; align-items: start; gap: 15px; }.section-heading>p br { display: none; }
  .book-finder { padding-block: 48px; }.guide-card { padding: 19px 16px; }.guide-card h3 { font-size: 23px; }.guide-card p { font-size: 15px; }.guide-title { font-size: 13px; }
  .film-section { padding-block: 44px; }.film-layout { grid-template-columns: 1fr; gap: 24px; }.film-copy h2 br { display: none; }.film-copy h2 { font-size: 33px; margin-bottom: 15px; }.film-copy .film-hint { margin-top: 14px; }
  .collection-heading { padding-top: 50px; }.book-feature { padding-block: 36px; }.feature { grid-template-columns: 1fr; gap: 20px; }.feature-book { width: 220px; margin: auto; }.feature-txt>.eyebrow { padding-right: 0; }.feature-seal { right: 5px; top: 18px; }.feature-txt>p { font-size: 17px; }.feature-txt>p:has(.btn) { gap: 12px 20px; }
  .method-section { margin-top: 20px; padding-block: 38px; }.method-layout { grid-template-columns: 1fr; gap: 30px; }.method-image { height: 300px; }.method-copy p { font-size: 17px; }
  .downloads-section { padding-block: 48px; }.downloads-layout { grid-template-columns: 1fr; gap: 32px; }.downloads-layout li { font-size: 17px; }
}
@media (max-width: 370px) { .guide-grid { grid-template-columns: 1fr; }.guide-card+.guide-card { border-left: 0; }.masthead nav { flex-wrap: wrap; gap: 7px 18px; justify-content: start; } }