.m4-vid { max-width: 640px; --u: max(1px, calc(100cqi / 470)); }

.li-post { container-type: inline-size; background: var(--panel); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px #3A363B, 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
.li-post video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.li-open { margin-left: auto; flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--bone); border-radius: 999px; font-size: calc(13 * var(--u)); font-weight: 700; text-decoration: none; white-space: nowrap; }
.li-open:hover, .li-open:focus-visible { background: var(--bone); color: var(--ink); }
.li-acts { display: flex; justify-content: space-around; padding: calc(10 * var(--u)) calc(8 * var(--u)); border-top: 1px solid var(--hair); }
.li-acts a { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); min-height: 44px; padding: 0 calc(10 * var(--u)); color: var(--ash); font-size: calc(14 * var(--u)); font-weight: 700; text-decoration: none; }
.li-acts a:hover, .li-acts a:focus-visible { color: var(--bone); }
.li-acts a:hover .ig-ic, .li-acts a:focus-visible .ig-ic { stroke: var(--bone); }
.li-acts .ig-ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke: var(--ash); }


.m4-social .m4-smp { grid-column: 1 / -1; }

.m4-social { --card: min(560px, 41cqw); }
.m4-social .m4-txt { grid-column: 1 / -1; grid-row: 2; margin-inline: calc(-1 * var(--mx)); padding-top: var(--s3); display: grid; grid-template-columns: repeat(2, var(--card)); justify-content: space-evenly; gap: var(--s2) 0; }
.m4-social .m4-txt .m4-promise { margin-top: 8px; }
.ig { display: grid; grid-template-columns: repeat(2, var(--card)); justify-content: space-evenly; gap: var(--s2) 0; align-items: start; margin-inline: calc(-1 * var(--mx)); }
.ig-note { grid-column: 1 / -1; }
.ig-r { position: fixed; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ig-card, .ig-post { background: var(--panel); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px #3A363B, 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
.ig-post { scroll-margin-top: var(--s2); }


.ig { --u: max(1px, calc(100cqi / 470)); }
.ig-card, .ig-post { container-type: inline-size; }
.ig-top { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)); }
.ig-av { flex: none; display: grid; place-items: center; width: calc(84 * var(--u)); height: calc(84 * var(--u)); padding: calc(14 * var(--u)); border-radius: 50%; background: var(--ink); border: calc(2 * var(--u)) solid var(--red); }
.ig-av .logo { width: 100%; }
.ig-av-s { width: calc(36 * var(--u)); height: calc(36 * var(--u)); padding: calc(5 * var(--u)); border-width: calc(1.5 * var(--u)); }
.ig-who { min-width: 0; }
.ig-who b { display: block; font-size: calc(26 * var(--u)); line-height: 1.1; }
.ig-btns { display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.ig-btns span { display: inline-flex; align-items: center; min-height: calc(30 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: #26242A; font-weight: 700; font-size: calc(14 * var(--u)); }
.ig-btns span:first-child { background: var(--red); }
.ig-stat { margin-top: calc(8 * var(--u)); color: var(--ash); font-size: calc(14 * var(--u)); }
.ig-stat b { display: inline; color: var(--bone); font-size: inherit; }
.ig-bio { padding: calc(6 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.4; }
.ig-bio b { display: block; }
.ig-link { color: var(--bone); text-decoration: underline; text-underline-offset: calc(3 * var(--u)); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--u)); border-top: 1px solid var(--hair); padding-top: calc(2 * var(--u)); }
.ig-tile { position: relative; display: block; cursor: pointer; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.ig-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s var(--ease); }
.ig-tile:hover img { opacity: 0.85; }
.ig-tile::after { content: ""; position: absolute; inset: 0; border: calc(4 * var(--u)) solid transparent; pointer-events: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.ig-note { grid-column: 1 / -1; }


#ig1:checked ~ .ig-card label[for="ig1"]::after, #ig2:checked ~ .ig-card label[for="ig2"]::after, #ig3:checked ~ .ig-card label[for="ig3"]::after,
#ig4:checked ~ .ig-card label[for="ig4"]::after, #ig5:checked ~ .ig-card label[for="ig5"]::after, #ig6:checked ~ .ig-card label[for="ig6"]::after { border-color: var(--bone); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--ink); }
#ig1:focus-visible ~ .ig-card label[for="ig1"], #ig2:focus-visible ~ .ig-card label[for="ig2"], #ig3:focus-visible ~ .ig-card label[for="ig3"],
#ig4:focus-visible ~ .ig-card label[for="ig4"], #ig5:focus-visible ~ .ig-card label[for="ig5"], #ig6:focus-visible ~ .ig-card label[for="ig6"] { outline: 2px solid var(--bone); outline-offset: -6px; }
.ig-post { display: none; }
#ig1:checked ~ .ig-feed .p1, #ig2:checked ~ .ig-feed .p2, #ig3:checked ~ .ig-feed .p3, #ig4:checked ~ .ig-feed .p4, #ig5:checked ~ .ig-feed .p5, #ig6:checked ~ .ig-feed .p6 { display: block; }


.ig-ph { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.ig-pn { display: block; line-height: 1.2; }
.ig-pn b { display: block; font-size: calc(15 * var(--u)); }
.ig-pn small { display: block; color: var(--ash); font-size: calc(12 * var(--u)); }
.ig-dots { margin-left: auto; color: var(--ash); letter-spacing: calc(2 * var(--u)); }
.ig-post > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; background: var(--ink); }
.ig-cta { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); background: #E4DED3; color: #0B0A0C; }
.ig-cta small { display: block; text-transform: uppercase; letter-spacing: 0.04em; font-size: calc(11 * var(--u)); color: #5A5560; }
.ig-cta b { font-size: calc(15 * var(--u)); }
.ig-cta .sx-pill { border-color: #0B0A0C; color: #0B0A0C; font-size: calc(13 * var(--u)); }
.ig-acts { display: flex; justify-content: space-between; padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)); }
.ig-acts span { display: flex; gap: calc(16 * var(--u)); }
.ig-acts > svg { margin-left: auto; }
.ig-ic { width: calc(26 * var(--u)); height: calc(26 * var(--u)); fill: none; stroke: var(--bone); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ig-cap { padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.4; }
.ig-cap b { margin-right: calc(4 * var(--u)); }
.ig-gap { display: block; height: 0.6em; }


.m4-pg .m4-smp { grid-column: 2 / span 7; }
.pg-fig { max-width: 720px; }
.pg-win { border-radius: 10px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px #3A363B, 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.pg-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.pg-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A363B; }
.pg-bar span { margin-left: 10px; padding: 3px 14px; border-radius: 6px; background: var(--ink); color: var(--ash); font: 12px/1.4 var(--f-mono); }
.pg-scroll { height: clamp(300px, 46vw, 480px); overflow-y: auto; overscroll-behavior: contain; background: var(--ink); }
.pg-scroll img { display: block; width: 100%; height: auto; }
.pg-fig figcaption { margin-top: 12px; }

@container site (max-width: 1199px) {
  .m4-pg .m4-smp { grid-column: 1 / span 8; }
}
@container site (max-width: 720px) {
  .m4-social { --card: min(560px, 100cqw - 2 * var(--mx)); }   
  .m4-social .m4-txt, .ig { grid-template-columns: var(--card); }
  .m4-pg .m4-smp { grid-column: 1 / -1; }
  .ig-av { width: 72px; height: 72px; padding: 12px; }
  .pg-scroll { height: 460px; }
}