:root { --ink-deep:#102a25; --mint:#bcf4d7; --glass:rgba(229,255,241,.09); }
.reading-track { position:fixed; z-index:150; inset:0 0 auto; height:3px; pointer-events:none; }
.reading-track span { display:block; height:100%; background:linear-gradient(90deg,#45a884,#b8e8b5); transform:scaleX(var(--reading,0)); transform-origin:left; }
.hero.hero-cinema { position:relative; isolation:isolate; overflow:hidden; width:100%; max-width:none; min-height:calc(100svh - 72px); padding:clamp(4rem,8vw,8rem) max(5vw,calc((100vw - 1320px)/2)); display:grid; grid-template-columns:1.1fr .7fr; align-items:center; gap:clamp(2rem,6vw,7rem); color:#fff; background:radial-gradient(ellipse at 85% 42%,#477765 0%,#203f35 43%,#102a25 74%); }
.hero-cinema::after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(10,27,22,.92) 0%,rgba(12,30,24,.72) 43%,rgba(12,30,24,.19) 100%); }
.hero-film { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center; opacity:0; transition:opacity .5s ease; }
.hero-film.is-playing { opacity:1; }
.hero-cinema:has(.hero-film[poster]) { background-image:url('/assets/focus-hero-poster.webp'); background-size:cover; background-position:65% center; }
.official-cover { display:block; width:min(66%, 320px); height:auto; border-radius:4px 12px 12px 4px; box-shadow:10px 16px 30px #15332a35; }
.hero-cinema .hero-copy { position:relative; }
.hero-cinema h1 { color:#fff; font-size:clamp(3rem,5.4vw,6rem); line-height:.99; letter-spacing:-.065em; }
.hero-cinema .sage-text,.hero-cinema .eyebrow { color:var(--mint); }
.hero-cinema .hero-intro,.hero-cinema .hero-badges { color:#e1eee7; }
.hero-cinema .button { background:var(--mint); color:var(--ink-deep); border-color:transparent; }
.hero-cinema .text-link { color:#fff; }
.hero-cinema .hero-badges span { border:1px solid #ffffff38; border-radius:99px; padding:.35rem .7rem; }
.hero-glass { display:grid; gap:.65rem; padding:clamp(1rem,3vw,2rem); background:var(--glass); border:1px solid #ffffff3d; border-radius:28px; box-shadow:0 24px 90px #0719114d; backdrop-filter:blur(15px); }
.hero-glass h2 { font-size:clamp(1.35rem,2vw,2.2rem); line-height:1.1; color:#fff; margin:.2rem 0 .8rem; }
.hero-glass a { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.65rem; color:#fff; text-decoration:none; padding:.9rem; border-radius:14px; background:#ffffff13; }
.hero-glass a span:first-child { color:var(--mint); font-size:.8rem; }
.hero-glass a:hover,.hero-glass a:focus-visible { background:#ffffff2a; }
.film-control { position:absolute; bottom:1rem; right:max(5vw,1rem); padding:.55rem .8rem; border-radius:99px; color:white; background:#112821df; border:1px solid #ffffff60; }
.feature-deck { padding-block:clamp(4rem,7vw,7rem); }
.feature-deck h2 { margin:.25rem 0 1.5rem; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.feature-card { position:relative; min-height:15rem; display:flex; flex-direction:column; justify-content:flex-end; gap:.55rem; padding:clamp(1rem,2vw,1.8rem); border-radius:25px; overflow:hidden; text-decoration:none; color:#15332a; background:#e0f3e8; border:1px solid #234b301b; }
.feature-card:nth-child(2) { background:#eeebf9; }
.feature-card:nth-child(3) { background:#f7ecdc; }
.feature-card::before { content:attr(data-card); position:absolute; top:.25rem; right:1rem; font-size:clamp(3rem,7vw,6rem); font-weight:800; color:#1c3d2e13; line-height:1; }
.feature-card h3,.feature-card p { margin:0; }
.digital-edition {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(1.5rem,5vw,4rem);
  margin-block:clamp(2rem,5vw,4rem) 0;
  border-radius:28px;
  background:#e0f3e8;
  scroll-margin-top:6rem;
}
.digital-edition h2 { margin:.4rem 0 .8rem; }
.digital-edition .button { margin-top:1.2rem; }
.digital-formats { padding:clamp(1rem,2.5vw,2rem); border:1px solid #234b301b; border-radius:20px; background:#ffffffa8; }
.digital-formats h3 { margin:0 0 .65rem; }
.digital-formats ul { margin:0; padding:0; list-style:none; }
.digital-formats li { display:grid; gap:.15rem; padding:.7rem 0; }
.digital-formats li + li { border-top:1px solid #234b3026; }
.digital-formats li span { color:#39534b; }
@media (max-width:760px) { .digital-edition { grid-template-columns:minmax(0,1fr); } }
.feature-card strong { margin-top:.5rem; }
.feature-card,.hero-glass a,.button,.calendar button { transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.feature-card:hover,.feature-card:focus-visible { transform:translateY(-5px); box-shadow:0 18px 35px #132b211b; }
.button:active,.hero-glass a:active { transform:scale(.98); }
.feature-card:focus-visible,.hero-glass a:focus-visible,.film-control:focus-visible { outline:3px solid #4ca88e; outline-offset:4px; }
@keyframes soft-rise { from {opacity:.35; transform:translateY(16px)} to {opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion:no-preference) { .hero-cinema .hero-copy,.hero-glass,.enter-view { animation:soft-rise .65s ease both; } .hero-glass { animation-delay:.12s; } }
@media (max-width:760px) { .hero.hero-cinema { grid-template-columns:minmax(0,1fr); min-height:calc(100svh - 60px); gap:1.75rem; padding:4rem 5vw 4.5rem; } .hero-cinema h1 { font-size:clamp(2.75rem,10.8vw,4.4rem); } .hero-cinema .sage-text br { display:none; } .hero-glass { padding:1rem; } .hero-cinema::after { background:linear-gradient(110deg,#0b2119ed,#102a25b8 70%,#102a2580); } .feature-grid { grid-template-columns:1fr; } .feature-card { min-height:12rem; } }
@media (prefers-reduced-motion:reduce) { .feature-card,.hero-glass a,.button,.hero-film { transition:none; } .feature-card:hover,.button:active,.hero-glass a:active { transform:none; } }