/* FILMS and PHOTOS sections; keep the former small-card dimensions for films. */
.contents-page {--green:#064b16}
.contents-main {margin:0 var(--page-gutter) clamp(40px,calc(4 * var(--layout-unit)),56px)}
.contents-intro {
 padding:clamp(96px,calc(9 * var(--layout-unit)),120px) 20px;
 text-align:center;
 border-bottom:1px solid var(--block-rule);
}
.contents-title {
 margin:0;
 font-family:var(--serif);
 font-size:var(--type-title);
 font-weight:400;
 line-height:1.2;
}
.contents-description {
 margin:24px 0 0;
 font-size:var(--type-body);
 line-height:1.8;
 letter-spacing:-.025em;
 word-break:keep-all;
 overflow-wrap:break-word;
}
.contents-description span {display:block}
.episodes {
 --episode-feature-gap:clamp(20px,calc(2.2 * var(--layout-unit)),30px);
 padding:clamp(68px,calc(6.2 * var(--layout-unit)),84px) clamp(0px,calc(1.2 * var(--layout-unit)),16px) clamp(96px,calc(8 * var(--layout-unit)),112px);
 border-bottom:1px solid var(--block-rule);
}
.contents-section-title {
 margin:0 0 clamp(32px,calc(3.2 * var(--layout-unit)),44px);
 text-align:center;
 font-family:var(--serif);
 font-size:calc(var(--type-subtitle) * .7);
 font-weight:400;
 line-height:1.25;
}
.photo-gallery {
 padding:clamp(68px,calc(6.2 * var(--layout-unit)),84px) clamp(0px,calc(1.2 * var(--layout-unit)),16px);
 border-bottom:1px solid var(--block-rule);
}
.photo-gallery .contents-section-title {margin-bottom:0}
.episodes-grid {
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 width:calc((100% - var(--episode-feature-gap)) / 2.16 * 1.5);
 margin-inline:auto;
 align-items:start;
 gap:32px 16px;
 min-width:0;
}
.episode-card {min-width:0}
.episode-link {display:block}
.episode-thumbnail {position:relative;width:100%;aspect-ratio:16/9;background:#f0f2ef;overflow:hidden}
.episode-thumbnail img {display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.episode-play-mark {
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 width:36px;
 height:36px;
 margin:auto;
 border:1px solid rgba(255,255,255,.85);
 border-radius:50%;
 background:rgba(6,75,22,.72);
 color:#fff;
 transition:background .2s ease,transform .2s ease;
}
.episode-play-mark svg {display:block;width:11px;height:13px;margin-left:2px}
.episode-series {margin:14px 0 0;color:var(--green);font-size:11px;line-height:1.5;letter-spacing:.07em}
.episode-title {margin:5px 0 0;font-size:var(--type-body);font-weight:400;line-height:1.5;letter-spacing:-.025em;word-break:keep-all;overflow-wrap:break-word}
.episode-link:focus-visible .episode-play-mark {background:var(--green);transform:scale(1.08)}
@media(hover:hover) {
 .episode-link:hover .episode-play-mark {background:var(--green);transform:scale(1.08)}
 .episode-link:hover .episode-title {color:var(--green)}
}

/* Native dialog keeps focus within the video and credits while open. */
html.episode-modal-open {overflow:hidden;scrollbar-gutter:stable}
.episode-dialog {
 width:min(960px,calc(100vw - 48px));
 max-width:none;
 max-height:calc(100vh - 48px);
 max-height:calc(100dvh - 48px);
 margin:auto;
 padding:0;
 border:1px solid var(--block-rule);
 background:#fff;
 color:var(--ink);
 font-family:var(--sans);
 overflow:auto;
 overscroll-behavior:contain;
 box-shadow:0 20px 80px rgba(0,0,0,.2);
}
.episode-dialog:not([open]) {display:none}
.episode-dialog::backdrop {background:rgba(0,0,0,.72)}
.episode-dialog-toolbar {
 position:sticky;
 top:0;
 z-index:2;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 min-height:60px;
 padding:8px 20px;
 border-bottom:1px solid #e5e5e5;
 background:#fff;
}
.episode-dialog-toolbar p {margin:0;color:var(--green);font-size:12px;line-height:1.5;letter-spacing:.06em}
.episode-dialog-close {display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-width:64px;min-height:44px;padding:8px;border:0;background:transparent;color:var(--ink);font-size:13px;cursor:pointer}
.episode-dialog-close svg {width:20px;height:20px}
.episode-dialog-close:hover,.episode-dialog-close:focus-visible {color:var(--green)}
.episode-dialog-close:focus-visible {outline-offset:0}
.episode-dialog-player {position:relative;width:100%;aspect-ratio:16/9;min-height:200px;background:#000}
.episode-dialog-player iframe {position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.episode-dialog-details {padding:32px 40px 40px}
.episode-modal-title {margin:0;font-size:clamp(23px,2.4vw,30px);font-weight:400;line-height:1.4;letter-spacing:-.025em;word-break:keep-all;overflow-wrap:break-word}
.episode-modal-subtitle {margin:10px 0 0;color:#686868;font-size:14px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}
.episode-credits {margin-top:32px;padding-top:24px;border-top:1px solid var(--block-rule)}
.episode-credits h3 {margin:0 0 24px;color:var(--green);font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:.04em}
.episode-credit-list {margin:0;font-size:14px;line-height:1.8}
.episode-credit-row {display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;margin-top:15px}
.episode-credit-row:first-child {margin-top:0}
.episode-credit-row dt {color:#6b6b6b}
.episode-credit-row dd {margin:0;word-break:keep-all;overflow-wrap:break-word}
.episode-credit-row dd span {display:block}
.episode-watch-link {display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:28px;color:var(--green);font-size:13px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px) {
 .episodes-grid {width:100%;gap:24px 20px}
}
@media(max-width:700px) {
 .contents-intro {padding:76px 0 84px}
 .contents-description {margin-top:22px}
 .episodes {padding:60px 0 80px}
 .photo-gallery {padding:60px 0}
 .episodes-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 .episode-dialog {width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
 .episode-dialog-toolbar {gap:8px;padding:6px 12px;min-height:56px}
 .episode-dialog-toolbar p {font-size:10px}
 .episode-dialog-details {padding:24px 20px 28px}
 .episode-modal-subtitle {font-size:13px}
 .episode-credits {margin-top:24px}
 .episode-credit-list {font-size:13px}
 .episode-credit-row {grid-template-columns:90px minmax(0,1fr);gap:8px}
}
@media(max-width:380px) {
 .episodes-grid {grid-template-columns:minmax(0,1fr)}
}